<template>
	<view style="">
		<view v-for="(item,index) in service.data" :key="index" style="margin-bottom: 87rpx;">
			<view style="display: flex;flex-direction: column;">
				<view class="u-flex u-row-between">
					<view style="font-size: 36rpx;font-weight: bold;color: #39383D;">{{item.name}}</view>
					<view style="font-size: 26rpx;font-weight: bold;color: #333333;margin-right: 2rpx;" @click="moreClick(index)">查看全部</view>
				</view>
				<view style="margin-top: 38rpx;">
					<scroll-view class="scroll-view_img" :scroll-x="true">
						<view class="scroll-view-img-item_H" v-for="(item,i) in item.list" :key="i" @click="itemClick(index,i)">
							<view>
								<u-image :src="item.image_url" width="315rpx" height="315rpx"></u-image>
								<view style="font-size: 28rpx;font-weight: bold;color: #001111;margin-top: 40rpx;">{{item.title}}</view>
								<view style="font-size: 28rpx;font-weight: bold;color: #333333;margin-top: 10rpx;">{{item.price}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			service: {
				type: Object,
				default: null
			},
			value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
				type: [String, Number],
				default: 0
			},
		},
		data() {
			return {}
		},
		methods: {
			moreClick(index){
				this.$u.throttle(res=>{
					this.service.moreClick(index)
				},1000)
			},
			itemClick(index,i){
				this.$u.throttle(res=>{
					this.service.itemClick(index,i)
				},1000)
			}
		}
	}
</script>

<style lang="scss">
	.scroll-view_img {
		white-space: nowrap;
		width: 100%;

		.scroll-view-img-item_H {
			display: inline-block;
			margin-right: 24rpx;
		}
	}
</style>
